<template>
  <div class="container">
    <img :src="list?.imgUrl?.startsWith('http') ? list.imgUrl : `${this.$NuoYiUrl}${list.imgUrl}`"
         alt="业务图片"
         class="w-100"
    />
    <!--    <div class="zhuangxian">
          <div class="max-1200 u-flex u-flex-wrap h-100">
            <a href="#" class="" @click.prevent="setActive($event, '俄罗斯专线')"
              >俄罗斯专线</a
            >
            <a
              href="#"
              class=""
              @click.prevent="setActive($event, '哈萨克斯坦专线')"
              >哈萨克斯坦专线</a
            >
            <a
              href="#"
              class=""
              @click.prevent="setActive($event, '吉尔吉斯坦专线')"
              >吉尔吉斯坦专线</a
            >
            <a href="#" class="" @click.prevent="setActive($event, '白俄罗斯专线')"
              >白俄罗斯专线</a
            >
          </div>
        </div>-->
    <el-breadcrumb separator="/" style="padding-right: 20px;padding-left: 20px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ list.titleCn }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content"
         style="line-height: 46px; background:url(	https://esudagz.com/template/web/default/skin/img/image/about_case.jpg)">
      <div class="zhuanxian-content" style="padding: 0 1.875rem 5rem ">
        <p>
          <strong style="left: 0px; white-space: pre-wrap;line-height: 1.5 !important;">{{ isChinese ? list.descCn : list.descRa }}</strong>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import "../../../assets/css/zhuanxian.css";
import EventBus from "@/eventBus";

export default {
  data() {
    return {
      isChinese: true, // 是否是中文
      list: {}, // 公司业务列表
      // currentBreadcrumb: "", // 面包屑的初始值
    };
  },

  mounted() {
    // 监听语言变化事件
    EventBus.on('languageChanged', (newIsChinese) => {
      this.isChinese = newIsChinese;
    });
    // this.setDefaultActive(); // 组件加载后调用
    this.getCompanyBusiness(); // 获取公司业务接口
  },
  beforeDestroy() {
    // 确保在组件销毁之前停止监听事件
    EventBus.off('languageChanged');
  },
  methods: {
    /*公司业务接口*/
    async getCompanyBusiness() {
      // 这里是公司业务接口
      const {data: res} = await this.$http.get('/alltext/listAlltext?typeid=2',);
      console.log("公司业务接口", res);
      if (res.code === 200) {
        this.list = res.list[0];
        console.log("公司业务列表", this.list);
      } else {
        this.$message.error("获取公司业务失败");
      }
    },

    // setActive(event, lineName) {
    //   // 移除所有链接的active类
    //   const links = document.querySelectorAll(".zhuangxian a");
    //   links.forEach((link) => {
    //     link.classList.remove("active");
    //   });
    //
    //   // 为当前点击的链接添加active类
    //   event.currentTarget.classList.add("active"); // 使用 event.currentTarget
    //   // 更新面包屑内容
    //   this.currentBreadcrumb = lineName; // 更新面包屑文本
    // },
    // setDefaultActive() {
    //   // 默认选中俄罗斯专线
    //   const links = document.querySelectorAll(".zhuangxian a");
    //   if (links.length > 0) {
    //     links[0].classList.add("active"); // 选中俄罗斯专线
    //   }
    // },
  },
};
</script>

<style scoped>
.zhuanxian-content p {
  text-align: left;
  font-size: 14px;
  line-height: 2;
}
.content img {
  margin-top: 10px;
}
</style>
